<template>
  <div class="app-container">
    <div class="search-form">
      <el-form :model="params" inline label-width="100px">
        <el-form-item label="订单标题">
          <el-input v-model="params.title" placeholder="请输入标题" clearable style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="订单开始时间">
          <el-date-picker
              v-model="params.startingTime"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 240px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单截止时间">
          <el-date-picker
              v-model="params.deadline"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 240px;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-btn" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table" style="margin-top: 20px">
      <el-table :data="tableData" stripe>
        <el-table-column label="序号" align="center" width="55" type="index"></el-table-column>
        <el-table-column prop="title" label="任务标题"></el-table-column>
        <el-table-column prop="status" label="任务状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">待处理</span>
            <span v-if="scope.row.status === 2">进行中</span>
            <span v-if="scope.row.status === 3">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="订单总金额"></el-table-column>
        <el-table-column prop="deposit" label="订单定金"></el-table-column>
        <el-table-column prop="deadline" label="任务截止日期" min-width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建任务时间" min-width="100"></el-table-column>
        <el-table-column prop="updateTime" label="更新任务时间" min-width="100"></el-table-column>
      </el-table>
      <el-pagination
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :current-page.sync="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="text-align: center; margin: 30px 0"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getOrderDetailPage } from "@/api/consultant/order";

export default {
  name: "orderList",
  filters: {
    statusFormatter(val) {
      switch (val) {
        case 1:
          return "待处理";
        case 1:
          return "进行中";
        case 1:
          return "已完成";
      }
    },
    typesFormatter(val) {
      if (!val) return;
      const arr = [
        { value: 1, name: "内衬" },
        { value: 2, name: "上衣" },
        { value: 3, name: "外套" },
        { value: 4, name: "裤装" },
        { value: 5, name: "裙装" },
        { value: 6, name: "套装" },
      ];
      return arr.find((item) => item.value === val).name;
    },
  },
  data() {
    return {
      params: {
        title: null,
        startingTime: null,
        deadline: null
      },
      total: 0,
      page: 1,
      pageSize: 10,
      tableData: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getOrderDetailPage(this.page, this.pageSize, this.params)
          .then((res) => {
            this.tableData = res.list;
            this.total = res.total;
          })
          .catch((err) => {
            this.$message.error("请求出错了：" + err);
          });
    },
    handleQuery() {
      this.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>